import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoTagSection extends StatefulWidget {
  const VanDocDemoTagSection({super.key});

  @override
  State<VanDocDemoTagSection> createState() => _VanDocDemoTagSectionState();
}

class _VanDocDemoTagSectionState extends State<VanDocDemoTagSection> {
  @override
  Widget build(BuildContext context) {
    bool show = false;
    return Scaffold(
      appBar: AppBar(title: const Text("Tag")),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20),
            const VanCellGroup(inset: true, children: [
              VanCell(title: "primary 类型", value: VanTag(type: VanTagType.primary)),
              VanCell(title: "success 类型", value: VanTag(type: VanTagType.success)),
              VanCell(title: "danger 类型", value: VanTag(type: VanTagType.danger)),
              VanCell(title: "warning 类型", value: VanTag(type: VanTagType.warning)),
            ]),
            //
            const VanDocDemoBlockTitle(title: "样式风格", paddingTop: 20),
            VanCellGroup(inset: true, children: [
              const VanCell(title: "空心样式", value: VanTag(type: VanTagType.primary, plain: true)),
              const VanCell(title: "圆角样式", value: VanTag(type: VanTagType.primary, round: true)),
              const VanCell(title: "标记样式", value: VanTag(type: VanTagType.primary, mark: true)),
              VanCell(
                  title: "可关闭标签",
                  value: StatefulBuilder(builder: (context, setState) {
                    return VanTag(
                      type: VanTagType.primary,
                      size: VanTagSize.medium,
                      closeable: true,
                      show: show,
                      onClose: () {
                        setState(() => show = false);
                      },
                    );
                  })),
            ]),
            //
            const VanDocDemoBlockTitle(title: "标签大小", paddingTop: 20),
            const VanCellGroup(inset: true, children: [
              VanCell(title: "小号标签", value: VanTag(type: VanTagType.primary)),
              VanCell(title: "中号标签", value: VanTag(type: VanTagType.primary, size: VanTagSize.medium)),
              VanCell(title: "大号标签", value: VanTag(type: VanTagType.primary, size: VanTagSize.large)),
            ]),
            //
            const VanDocDemoBlockTitle(title: "自定义颜色", paddingTop: 20),
            const VanCellGroup(inset: true, children: [
              VanCell(title: "背景颜色", value: VanTag(color: Color(0xff7232dd))),
              VanCell(title: "文字颜色", value: VanTag(color: Color(0xffffe1e1), textColor: Color(0xffad0000))),
              VanCell(title: "空心颜色", value: VanTag(color: Color(0xff7232dd), plain: true)),
            ]),
          ],
        ),
      ),
    );
  }
}
